<template>
	<view class="fixtop" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}">
		<fixtitletopVue>
			<template #l>
				<view class="fix-l" @click="back">
					<view>
						<view class="iconfont icon-jiantou"></view>
					</view>
				</view>
			</template>
			<template #c>
				<view class="fix-c">
					主题
				</view>
			</template>
		</fixtitletopVue>
	</view>
	<view class="conbox">
		<view class="thembox">
			<view class=" " :class="{'them-ac':usethemestore.themname=='pink'}"
				@click="chnaghethem('#ff55ff','#ffc2fe','pink')">
				<div class="top" style="color: #ff55ff;">
					<div class="iconfont icon-zhuti_tiaosepan"></div>
					pink
				</div>
				<div class="tm-show">
					<div style="background-color: #ff55ff"></div>
					<div style="background-color: #ffc2fe"></div>
					<div style="background-color: #000"></div>
					<div style="background-color: #fff"></div>
				</div>
			</view>
			<view class="" :class="{'them-ac':usethemestore.themname=='blue'}"
				@click="chnaghethem('#4eaaff',' #c2ecff','blue')">
				<div class="top" style="color: #4eaaff;">
					<div class="iconfont icon-zhuti_tiaosepan"></div>
					blue
				</div>
				<div class="tm-show">
					<div style="background-color: #4eaaff"></div>
					<div style="background-color: #c2ecff"></div>
					<div style="background-color: #000"></div>
					<div style="background-color: #fff"></div>
				</div>
			</view>
			<view class="" :class="{'them-ac':usethemestore.themname=='orange'}"
				@click="chnaghethem('#fa8c16','#fadfb9','orange')">
				<div class="top" style="color: #fa8c16;">
					<div class="iconfont icon-zhuti_tiaosepan"></div>
					orange
				</div>
				<div class="tm-show">
					<div style="background-color: #fa8c16"></div>
					<div style="background-color: #fadfb9"></div>
					<div style="background-color: #000"></div>
					<div style="background-color: #fff"></div>
				</div>
			</view>
			<view class="" :class="{'them-ac':usethemestore.themname=='green'}"
				@click="chnaghethem('#abff52','#cef5a5','green')">
				<div class="top" style="color:	#abff52;">
					green
				</div>
				<div class="tm-show">
					<div style="background-color: #abff52"></div>
					<div style="background-color: #cef5a5"></div>
					<div style="background-color: #000"></div>
					<div style="background-color: #fff"></div>
				</div>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	const heights = getstatusheight() + gettitleheight() + 'px'
	import themestore from '@/store/theme.js'
	const usethemestore = themestore()
	const back = () => {
		uni.navigateBack()
	}
	const chnaghethem = (color1, color2, themname) => {
		usethemestore.themname = themname
		usethemestore.themecolor = color1
		usethemestore.themecolor2 = color2
	}
</script>

<style lang="scss" scoped>
	.them-ac {
		position: relative;
		border: 3px solid #c0ab92;

		&::after {
			position: absolute;
			content: "\e60c";
			font-family: "iconfont" !important;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 12px;
			top: 0;
			right: 0;
			transform: translate(50%, -50%);
			height: 20px;
			width: 20px;
			border-radius: 50%;
			background-color: #c0ab92;
		}
	}

	.conbox {
		height: calc(100vh - v-bind(heights));
		background-color: #eee;
		padding: 25rpx;

		.thembox {
			width: 100%;
			display: grid;
			height: 470rpx;
			grid-template-columns: repeat(2, 1fr);
			justify-items: center;
			align-items: center;

			>view {
				height: 200rpx;
				width: 90%;
				background-color: #fff;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				padding: 0 20rpx;

				.top {
					height: 60rpx;
					width: 100%;
					display: flex;
					font-size: 35rpx;
					gap: 15rpx;
					align-items: center;

					.iconfont {
						font-size: 45rpx;
					}
				}

				.tm-show {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					>view {
						height: 50rpx;
						width: 50rpx;
						border-radius: 50%;
						border: 1px solid #b7b7b7;
						margin-left: -20rpx;
					}
				}
			}
		}

	}

	.fixtop {
		background-color: var(--themcolor);
		padding: 0 20rpx;
		border-bottom: 1rpx solid #dcdcdc;

		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 25rpx;
			}
		}

		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>